<template>
  <div class="profile">
    <!-- 导航条 -->
    <van-nav-bar left-arrow @click-left="$router.back()" title="编辑资料"></van-nav-bar>

    <!-- 编辑区 -->
    <van-cell-group>
        <input type="file" hidden ref="refPhoto" @change="changePhoto">
      <van-cell is-link title="头像"  center @click="$refs.refPhoto.click()">
        <van-image
          slot="default"
          width="1.5rem"
          height="1.5rem"
          fit="cover"
          :src="user.photo"
          round
        />
      </van-cell>

      <van-cell is-link title="名称" :value="user.name" @click="clickShowName"/>
      <van-cell is-link title="性别" :value="user.gender===0 ? '男' : '女'" @click="showGender=true"/>
      <van-cell is-link title="生日" :value="user.birthday" @click="clickShowBirthday"/>
    </van-cell-group>

    <van-dialog @confirm="saveName" v-model="showName" title="修改姓名" show-cancel-button>
        <van-field v-model.trim="newName" placeholder="请输入姓名"></van-field>
    </van-dialog>

    <!-- 修改性别 -->
    <van-popup v-model="showGender" position="bottom">
        <van-nav-bar title="修改性别" left-text="取消" @click-left="showGender=false">
        </van-nav-bar>
        <van-cell title="男" @click="saveGender(0)" is-link></van-cell>
        <van-cell title="女" @click="saveGender(1)" is-link></van-cell>
    </van-popup>

    <!-- 修改日期 -->
    <van-popup v-model="showBirthday" position="bottom">
    <van-datetime-picker
        v-model="newDate"
        @cancel='showBirthday=false'
        @confirm='saveBirthday'
        type="date"
        title="选择生日"
        :min-date="minDate"
        :max-date="maxDate"
    />
    </van-popup>
  </div>
</template>

<script>
import { reqGetProfile, reqUpdateUserInfo, reqUpDatePhoto } from '@/api/user.js'
import dayjs from 'dayjs'
export default {
  name: 'userProfile',
  data () {
    return {
      // 控制弹层
      showName: false,
      showGender: false,
      showBirthday: false,
      // 当前用户的信息
      user: {},
      newName: '',
      minDate: new Date(1990, 0, 1),
      maxDate: new Date(2025, 10, 1),
      newDate: new Date()
    }
  },
  created () {
    this.loadProfile()
  },
  methods: {
    async  loadProfile () {
      const res = await reqGetProfile()
      //   console.log(res)
      this.user = res.data.data
    },
    clickShowName () {
      this.showName = true
      this.newName = this.user.name
    },

    async saveName () {
      try {
        if (this.newName === '') return
        if (this.newName.length > 7) {
          this.$toast.fail('名字长度不能超过 7 个字符')
          return
        }
        await reqUpdateUserInfo({
          name: this.newName
        })
        //   console.log(res)
        this.user.name = this.newName
        this.newName = ''
        this.$toast.success('操作成功')
      } catch {
        this.$toast.fail('操作失败')
      }
    },
    async saveGender (gender) {
      try {
        await reqUpdateUserInfo({
          gender
        })
        this.user.gender = gender
        this.$toast.success('操作成功')
        this.showGender = false
      } catch {
        this.$toast.fail('操作失败')
      }
    },
    clickShowBirthday () {
      this.showBirthday = true
      this.newDate = new Date(this.user.birthday)
      console.log(this.user.birthday)
    },
    async saveBirthday () {
    //   console.log(this.newDate)
      try {
        const birthday = dayjs(this.newDate).format('YYYY-MM-DD')
        // console.log(birthday)
        await reqUpdateUserInfo({
          birthday
        })
        this.user.birthday = birthday
        this.$toast.success('操作成功')
        this.showBirthday = false
      } catch {
        this.$toast.fail('操作失败')
        this.showBirthday = false
      }
    },
    async changePhoto () {
      try {
        const photo = this.$refs.refPhoto.files[0]
        if (!photo) return

        this.$toast.loading({
          message: '文件上传中...',
          forbidClick: true,
          overlay: true
        })

        //   console.log(photo)
        const formData = new FormData()
        formData.append('photo', photo)
        const res = await reqUpDatePhoto(formData)
        console.log(res)
        this.user.photo = res.data.data.photo
        this.$toast.success('操作成功')
      } catch {
        this.$toast.fail('操作失败')
      }
    }
  }
}
</script>

<style lang="scss">
.profile{
    .van-picker__toolbar {
        background-color: rgb(49, 150, 250);
        .van-picker__title{
            color: white;
            font-size: 20px;
        }
        .van-picker__cancel, .van-picker__confirm{
            color: white;
        }
    }

}

</style>
